<template>
  <div class="order_goods_list">
    <el-container>
      <el-header>
        <header-item :item="tips"></header-item>
      </el-header>
      <el-main>
        <main-tools-item :toolsType="toolsType" :searchType="searchType" :defaultTime="defaultTime" @search='search'></main-tools-item>
        <main-spare-item @onClick=''></main-spare-item>
        <main-data-list-item :columns="columns" :dataList="dataList" :pager="page" @currentChange='currentChange'>
          <el-table-column label="操作" slot="table_oper" min-width="300px">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="handleUpBill(scope.$index, scope.row)">上传票据</el-button>
              <el-button size="mini" type="success" @click="handleCheckGoods(scope.$index, scope.row)">查看商品</el-button>
              <el-button size="mini" type="success" @click="handleCheckBill(scope.$index, scope.row)">查看票据</el-button>
            </template>
          </el-table-column>
        </main-data-list-item>
      </el-main>
    </el-container>
    <!--上传票据 -->
    <el-dialog title="上传票据" :visible.sync="upBillDialogVisible" width="30%" :before-close="beforeClose" close-on-press-escape
      close-on-click-modal class="defaultDialog" :modal="false">
      <el-form ref="upBillParam" :rules="upBillRules" :model="upBillParam" label-width="30%">
        <el-form-item label="名称" prop="name">
          <el-input v-model="upBillParam.name"></el-input>
        </el-form-item>
        <el-form-item label="票据图" prop="imgs">
          <el-upload class="upload-demo" :action="uploadUrl" :on-remove="upBillHandleRemove" :on-success="upBillHandleSuccess" :file-list="upBillFileList"
            list-type="picture" name="file" :limit="3" :headers="uploadHeaders">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb,3张</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="upBillSumbit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--查看票据 -->
    <el-dialog title="查看票据" :visible.sync="checkBillDialogVisible" width="30%" :before-close="beforeClose" close-on-press-escape
      close-on-click-modal class="defaultDialog" :modal="false">
      <el-form ref="checkBillParam" :model="checkBillParam" label-width="30%">
        <el-form-item label="订单号" prop="orderId">
          <el-input v-model="checkBillParam.orderId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="票据名称" prop="name">
          <el-input v-model="checkBillParam.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="票据图" prop="imgs">
          <el-image v-for="url in checkBillParam.img" :key="url" :src="url"></el-image>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--查看商品 -->
    <el-dialog title="查看商品" :visible.sync="checkGoodsDialogVisible" width="60%" :before-close="beforeClose" close-on-press-escape
      close-on-click-modal class="defaultDialog2" :modal="false">
      <!--增加物流 -->
      <el-dialog title="增加物流" :visible.sync="addExpressDialogVisible" width="60%" :before-close="beforeClose" close-on-press-escape
        close-on-click-modal class="defaultDialog3" :modal="false" append-to-body>
        <el-form ref="addExpressParam" :rules="addExpressRules" :model="addExpressParam" label-width="30%">
          <el-form-item label="快递类型" prop="expressType">
            <el-select v-model="addExpressParam.expressType" placeholder="请选择">
              <el-option v-for="item in addExpressOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="快递订单号" prop="expressNo">
            <el-input v-model="addExpressParam.expressNo"></el-input>
          </el-form-item>
          <el-form-item label="发送快递时间" prop="sendTime">
            <el-date-picker v-model="addExpressParam.sendTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="addExpressSumbit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <main-data-list-item :columns="checkGoodsColumns" :dataList="checkGoodsList" :pager="checkGoodsPage" @currentChange='checkGoodsCurrentChange'>
        <el-table-column label="操作" slot="table_oper" min-width="180px">
          <template slot-scope="scope" v-if="addExpressStatus">
            <el-button size="mini" type="success" @click="handleAddExpress(scope.$index, scope.row)">增加物流</el-button>
            <el-button size="mini" type="danger" @click="handleQuit(scope.$index, scope.row)">退单</el-button>
          </template>
        </el-table-column>
      </main-data-list-item>
    </el-dialog>
  </div>
</template>

<script>
  import {
    get,
    post,
    pat,
    del,
    common,
    getRefresh
  } from "../../../../api/api";
  import headerItem from "./../../Commons/headerItem.vue";
  import mainToolsItem from "./../../Commons/mainToolsItem.vue";
  import mainSpareItem from "./../../Commons/mainSpareItem.vue";
  import mainDataListItem from "./../../Commons/mainDataListItem.vue";
  import config from "../../../../../static/config.js";
  export default {
    components: {
      headerItem,
      mainToolsItem,
      mainSpareItem,
      mainDataListItem,
      UE: () =>
        import ('../ue.vue')
    },
    data() {
      return {
        tips: "商品订单",
        uploadUrl: window.dict.url + "/goods/upFilePic",
        toolsType: 2,
        searchType: 7,
        defaultTime: {
          startTime: '',
          endTime: ''
        },
        sels: [],
        page: {
          pageNo: 1,
          limit: 10,
          sizes: [10, 50, 100],
          total: 0
        },
        checkGoodsPage: {
          pageNo: 1,
          limit: 10,
          sizes: [10, 50, 100],
          total: 0
        },
        columns: [{
            prop: 'id',
            label: '订单ID',
            width: '300px',
            align: 'center'
          },
          {
            prop: 'tradeNo',
            label: '三方支付流水号',
            width: '160px',
            align: 'center',
          },
          {
            prop: 'orderGoodsUserInfo',
            label: '用户',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'totalPrice',
            label: '订单总价',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'rmb',
            label: 'RMB支付金额',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'linkMan',
            label: '收货人姓名',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'linkPhone',
            label: '收货人手机号',
            width: '160px',
            align: 'center'
          },
          {
            prop: 'linkAddress',
            label: '收货人地址',
            width: '200px',
            align: 'center'
          },
          {
            prop: 'orderStatus',
            label: '订单状态',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'createTime',
            label: '订单生成时间',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'paySucTime',
            label: '订单支付成功时间',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'sendTime',
            label: '订单发货时间',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'receiveTime',
            label: '订单已收货时间',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'completeTime',
            label: '订单已评价完成时间',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'refundTime',
            label: '订单退款时间',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'cancelTime',
            label: '订单取消时间',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'delTime',
            label: '订单删除时间',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'remark',
            label: '订单备注信息',
            width: '120px',
            align: 'center'
          }
        ],
        checkGoodsColumns: [{
            prop: 'id',
            label: '订单商品记录',
            width: '120',
            align: 'center'
          },
          {
            prop: 'orderId',
            label: '该商品所属订单',
            width: '120',
            align: 'center',
          },
          {
            prop: 'orderGoodsCheckGoodsName',
            label: '商品名称',
            width: '200',
            align: 'center'
          },
          {
            prop: 'orderGoodsCheckGoodsSku',
            label: '商品SKU配置',
            width: '120',
            align: 'center'
          },
          {
            prop: 'num',
            label: '商品数量',
            width: '120',
            align: 'center'
          },
          {
            prop: 'totalPrice',
            label: '购买商品总价',
            width: '120',
            align: 'center'
          },
          {
            prop: 'svipDiscount',
            label: 'SVIP优惠金额',
            width: '120',
            align: 'center'
          },
          {
            prop: 'tax',
            label: '税费',
            width: '120',
            align: 'center'
          },
          {
            prop: 'expressType',
            label: '快递类型',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'expressNo',
            label: '快递订单号',
            width: '120px',
            align: 'center'
          },
          {
            prop: 'freight',
            label: '邮费',
            width: '120',
            align: 'center'
          },
          {
            prop: 'orderGoodsSendTime',
            label: '发送快递时间',
            width: '160',
            align: 'center'
          },
          {
            prop: 'orderGoodsReceive',
            label: '是否收货',
            width: '120',
            align: 'center'
          },
          {
            prop: 'orderGoodsReceiveTime',
            label: '确认收货时间',
            width: '160',
            align: 'center'
          },
          {
            prop: 'rmb',
            label: 'RMB支付金额',
            width: '120',
            align: 'center'
          },
          {
            prop: 'balance',
            label: '余额支付金额',
            width: '120',
            align: 'center'
          },
          {
            prop: 'coin',
            label: '平台币使用数',
            width: '120',
            align: 'center'
          },
          {
            prop: 'couponId',
            label: '用户优惠券',
            width: '120',
            align: 'center'
          },
          {
            prop: 'couponValue',
            label: '优惠券金额',
            width: '120',
            align: 'center'
          },
          {
            prop: 'point',
            label: '积分抵扣数',
            width: '120',
            align: 'center'
          },
          {
            prop: 'needInvoice',
            label: '是否需要开取发票',
            width: '140',
            align: 'center'
          },
          {
            prop: 'isGroupBuy',
            label: '是否团购',
            width: '120',
            align: 'center'
          },
          {
            prop: 'gbId',
            label: '团购记录',
            width: '120',
            align: 'center'
          },
          {
            prop: 'shareUid',
            label: '分享该商品用户',
            width: '120',
            align: 'center'
          },
          {
            prop: 'shareTime',
            label: '分享该商品时间',
            width: '120',
            align: 'center'
          },
          {
            prop: 'orderRefund',
            label: '是否退款',
            width: '120',
            align: 'center'
          },
          {
            prop: 'orderRefundTime',
            label: '退款时间',
            width: '120',
            align: 'center'
          }
        ],
        dataList: [],
        checkGoodsList: [],
        loading: false,
        param: {
          startTime: '',
          endTime: '',
          orderId: '',
          size: '10',
          current: '1'
        },
        checkGoodsParam: {
          orderId: '',
          size: '10',
          current: '1'
        },
        upBillParam: {},
        checkBillParam: {
          orderId: '',
          name: '',
          img: []
        },
        addExpressParam: {
          expressType: '',
          expressNo: '',
          sendTime:''
        },
        upBillRules: {
          name: [{
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          }, ],
        },
        addExpressRules: {
          expressType: [{
            required: true,
            message: '请选择类型',
            trigger: 'blur'
          }, ],
          expressNo: [{
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          }, ],
          sendTime:[{
            required: true,
            message: '请选择日期',
            trigger: 'blur'
          }, ]
        },
        statusOptions: [{
          label: "不可用",
          value: 0
        }, {
          label: "可用",
          value: 1
        }],
        addExpressOptions: [{
          label: "顺丰",
          value: 1
        }, {
          label: "圆通",
          value: 2
        }, {
          label: "申通",
          value: 3
        }, {
          label: "中通",
          value: 4
        }, {
          label: "百世",
          value: 5
        }, {
          label: "韵达",
          value: 6
        }, {
          label: "德邦",
          value: 7
        }, {
          label: "宅急送",
          value: 8
        }, {
          label: "EMS",
          value: 9
        }, {
          label: "天天快递",
          value: 10
        }, {
          label: "跨越速运",
          value: 11
        }, {
          label: "中国邮政",
          value: 12
        }, {
          label: "蓝天快递",
          value: 13
        }, {
          label: "澳邮中国快运",
          value: 14
        }],
        gidOptions: [],
        upBillDialogVisible: false,
        addExpressDialogVisible: false,
        checkBillDialogVisible: false,
        checkGoodsDialogVisible: false,
        addExpressStatus:false,
        upBillFileList: [],
        uploadHeaders: {
          'token': localStorage.getItem('token')
        },
      };
    },
    methods: {
      //--------查询----------
      search(val) {
        this.param ={}
        this.param.orderId = "";
        this.param.phone = "";
        this.param.status = "";
        this.param.startTime = "";
        this.param.endTime = "";
        this.param.orderId = val.orderId;
        this.param.phone = val.phone;
        this.param.status = val.status;
        this.param.startTime = val.date[0];
        this.param.endTime = val.date[1];
        this.getUserOrderList();
      },
      //--------编辑----------
      beforeClose(done) {
        done()
      },
      //----上传票据----
      handleUpBill(index, row) {
        this.upBillDialogVisible = true;
        this.upBillParam ={};
        this.upBillParam.orderId = row.id;
        //         this.upBillFileList = [{
        //   name: row.xasGoodsList.name,
        //   url: row.coverImg
        // }]
      },
      upBillSumbit() {
        this.$refs['upBillParam'].validate(valid => {
          if (valid) {
            this.upBillDialogVisible = false;
            this.addOrderBillList();
          }
        })
      },
      upBillHandleRemove(file, fileList) {
        var midArray = []
        for (var item in fileList) {
          if (fileList[item].response != null) {
            midArray.push(fileList[item].response.data)
          } else {
            midArray.push(fileList[item].url)
          }
        }
        this.upBillParam.img = midArray.join(";")
      },
      upBillHandleSuccess(response, file, fileList) {
        var midArray = []
        for (var item in fileList) {
          if (fileList[item].response != null) {
            midArray.push(fileList[item].response.data)
          } else {
            midArray.push(fileList[item].url)
          }
        }
        this.upBillParam.img = midArray.join(";")
      },
      //----增加物流----
      handleAddExpress(index, row) {
        this.addExpressDialogVisible = true;
        this.addExpressParam.expressType = row.expressType;
        this.addExpressParam.expressNo = row.expressNo;
        this.addExpressParam.sendTime = row.sendTime;
        this.addExpressParam.orderId = row.orderId;
        this.addExpressParam.id = row.id;
      },
      addExpressSumbit() {
        this.$refs['addExpressParam'].validate(valid => {
          if (valid) {
            this.addExpressDialogVisible = false;
            this.updateUserOrderList();
          }
        })
      },
      handleQuit(index,row){
        this.quitConfirm(row.orderId,row.skuId);
      },
      //----查看商品----
      handleCheckGoods(index, row) {
        this.checkGoodsDialogVisible = true;
        this.checkGoodsParam.orderId = row.id;
        if(row.status == 2 ||row.status == 3 ||row.status == 4||row.status == 5){
          this.addExpressStatus = true;
        }else{
          this.addExpressStatus = false;
        }
        this.getOrderGoodsList();
      },
      //----查看票据----
      handleCheckBill(index, row) {
        this.checkBillDialogVisible = true;
        this.checkBillParam.orderId = row.id
        this.getOrderBill();
      },
      //-------分页----------
      currentChange(val) {
        this.param.current = "";
        this.param.current = val
        this.getUserOrderList();
      },
      checkGoodsCurrentChange(val) {
        this.checkGoodsParam.current = "";
        this.checkGoodsParam.current = val
        this.getOrderGoodsList();
      },
      //获取list列表
      getUserOrderList() {
        return new Promise((resolve, reject) => {
          var param = {};
          for (let key in this.param) {
            if (this.param[key] != null && this.param[key].length != 0) {
              param[key] = this.param[key]
            }
          }
          post("/order/selectUserOrderList", param).then(resdata => {
            let self = function () {
              this.$router.push({
                path: '/home'
              });
            }.bind(this);
            let error = function () {
              alert(resdata.msg)
            }.bind(this);
            let success = function () {
              if (resdata.code == 1) {
                this.dataList = resdata.data.records;
                this.page.total = resdata.data.total;
              }
            }.bind(this);
            common(self)(error)(success)(resdata);
            resolve();
          });
        });
      },
      addOrderBillList() {
        return new Promise((resolve, reject) => {
          var editParam = {};
          for (let key in this.upBillParam) {
            if (this.upBillParam[key] != null && this.upBillParam[key].length != 0) {
              editParam[key] = this.upBillParam[key]
            }
          }
          post("/order/addXasOrderBillList", editParam).then(resdata => {
            let self = function () {
              this.$router.push({
                path: '/home'
              });
            }.bind(this);
            let error = function () {
              alert(resdata.msg)
            }.bind(this);
            let success = function () {
              if (resdata.code == 1) {
                this.$message({
                  message: '编辑成功！',
                  type: 'success',
                  duration: 2000,
                });
                this.getUserOrderList();
              }
            }.bind(this);
            common(self)(error)(success)(resdata);
            resolve();
          });
        });
      },
      //增加物流
      updateUserOrderList() {
        return new Promise((resolve, reject) => {
          var editParam = {};
          for (let key in this.addExpressParam) {
            if (this.addExpressParam[key] != null && this.addExpressParam[key].length != 0) {
              editParam[key] = this.addExpressParam[key]
            }
          }
          post("/order/updateUserOrderList", editParam).then(resdata => {
            let self = function () {
              this.$router.push({
                path: '/home'
              });
            }.bind(this);
            let error = function () {
              alert(resdata.msg)
            }.bind(this);
            let success = function () {
              if (resdata.code == 1) {
                this.$message({
                  message: '编辑成功！',
                  type: 'success',
                  duration: 2000,
                });
                this.getOrderGoodsList();
              }
            }.bind(this);
            common(self)(error)(success)(resdata);
            resolve();
          });
        });
      },
      //获取票据数据
      getOrderBill() {
        return new Promise((resolve, reject) => {
          var param = {};
          for (let key in this.checkBillParam) {
            if (this.checkBillParam[key] != null && this.checkBillParam[key].length != 0) {
              param[key] = this.checkBillParam[key]
            }
          }
          post("/order/selectXasOrderBill", param).then(resdata => {
            let self = function () {
              this.$router.push({
                path: '/home'
              });
            }.bind(this);
            let error = function () {
              alert(resdata.msg)
            }.bind(this);
            let success = function () {
              if (resdata.code == 1) {
                if (resdata.data) {
                  this.checkBillParam = resdata.data;
                  this.checkBillParam.img = this.checkBillParam.img.split(";")
                }
              }
            }.bind(this);
            common(self)(error)(success)(resdata);
            resolve();
          });
        });
      },
      //获取商品数据
      getOrderGoodsList(id) {
        var param = {};
        for (let key in this.checkGoodsParam) {
          if (this.checkGoodsParam[key] != null && this.checkGoodsParam[key].length != 0) {
            param[key] = this.checkGoodsParam[key]
          }
        }
        return new Promise((resolve, reject) => {
          post("/order/selectXasOrderGoodsList", param).then(resdata => {
            let self = function () {
              this.$router.push({
                path: '/home'
              });
            }.bind(this);
            let error = function () {
              alert(resdata.msg)
            }.bind(this);
            let success = function () {
              if (resdata.code == 1) {
                this.checkGoodsList = resdata.data.records;
              }
            }.bind(this);
            common(self)(error)(success)(resdata);
            resolve();
          });
        });
      },
      quitConfirm(orderId,skuId) {
        this.$confirm('确定退单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.quitOrder(orderId,skuId);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退单'
          });
        });
      },
      //退单
      quitOrder(orderId,skuId) {
        return new Promise((resolve, reject) => {
          post("/order/refundOrder", {
            'orderId': orderId,
            'skuId':skuId
          }).then(resdata => {
            let self = function () {
              this.$router.push({
                path: '/home'
              });
            }.bind(this);
            let error = function () {
              alert(resdata.msg)
            }.bind(this);
            let success = function () {
              if (resdata.code == 1) {
                this.$message({
                  message: '退单成功！',
                  type: 'success',
                  duration: 2000,
                });
                this.getOrderGoodsList();
              }
            }.bind(this);
            common(self)(error)(success)(resdata);
            resolve();
          });
        });
      }
    },
    async mounted() {
      this.param.startTime = this.defaultTime.startTime;
      this.param.endTime = this.defaultTime.endTime;
      await this.getUserOrderList();
    },
    watch: {
      defaultTime(val, newVal) {
        console.log("defaultTime" + val)
      }
    }
  };

</script>

<style lang="scss">
  .order_goods_list {
    background-color: white;
    font-size: 1.8rem;
    width: 100%;
    height: 100%;
    .el-container {
      height: 100%;
      .el-header,
      .el-footer {
        background-color: #F9FAFE;
        color: #333;
        text-align: center;
        line-height: 50px;
        height: 50px !important;
        .header-child {
          height: 50px;
          width: 100%;
          text-align: left;
          padding-left: 20px;
          background-color: #cbe9eb;
          border-bottom: 1px solid black;
          box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
        }
      }
      .el-main {
        box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.5); // margin: 10px 20px;
        margin: 10px;
        background-color: #fff;
        color: #333;
        text-align: center;
        height: 100%;
        .tools {
          min-width: 1200px;
        }
      }
    }
    /* 弹框CSS*/
    .defaultDialog {
      z-index: 1200 !important;
      .el-dialog {
        box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        width: 50% !important;
        .el-dialog__header {
          text-align: left;
          .el-dialog__title {
            font-family: "Roboto", sans-serif;
            color: #7d7d7d;
            font-size: 15px;
          }
        }
        .el-dialog__body {
          .el-form {
            padding-left: 40px;
            .el-form-item {
              width: 100%;
              .el-form-item__content {
                text-align: left;
                width: 250px;
                .el-cascader {
                  width: 100%;
                }
                .el-select {
                  width: 100%;
                }
              }
              .el-form-item__label {
                padding: 0 50px 0 0;
                min-width: 80px;
                color: #333;
                font-weight: 400;
                font-size: 13px;
              }
            }
          }
        }
      }
    }
    .defaultDialog2 {
      z-index: 1200 !important;
      .el-dialog {
        box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        width: 80% !important;
        .el-dialog__header {
          text-align: left;
          .el-dialog__title {
            font-family: "Roboto", sans-serif;
            color: #7d7d7d;
            font-size: 15px;
          }
        }
        .el-dialog__body {
          .el-form {
            padding-left: 40px;
            .el-form-item {
              width: 100%;
              .el-form-item__content {
                text-align: left;
                width: 250px;
                .el-cascader {
                  width: 100%;
                }
                .el-select {
                  width: 100%;
                }
              }
              .el-form-item__label {
                padding: 0 50px 0 0;
                min-width: 80px;
                color: #333;
                font-weight: 400;
                font-size: 13px;
              }
            }
          }
        }
      }
    }
  }
    .defaultDialog3 {
      .el-dialog {
        box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        width: 60% !important;
        .el-dialog__header {
          text-align: left;
          .el-dialog__title {
            font-family: "Roboto", sans-serif;
            color: #7d7d7d;
            font-size: 15px;
          }
        }
        .el-dialog__body {
          .el-form {
            padding-left: 40px;
            .el-form-item {
              width: 100%;
              .el-form-item__content {
                text-align: left;
                width: 250px;
                .el-cascader {
                  width: 100%;
                }
                .el-select {
                  width: 100%;
                }
              }
              .el-form-item__label {
                padding: 0 50px 0 0;
                min-width: 80px;
                color: #333;
                font-weight: 400;
                font-size: 13px;
              }
            }
          }
        }
      }
    }
</style>
